<template>
  <div class="farmer-order-app">
    <!-- 主要内容区域 -->
    <main class="main-content">
      <div class="container">
        <!-- 页面标题和状态筛选 -->
        <div class="page-header">
          <div class="status-filter">
            <!-- From Uiverse.io by 00Kubi --> 
            <div class="radio-inputs" >
              <label class="radio">
                <input type="radio" value="pending" v-model="statusFilter"/>
                <span class="name">待确认订单</span>
              </label>
              <label class="radio">
                <input type="radio" value="confirmed" v-model="statusFilter"/>
                <span class="name">已确认订单</span>
              </label>
            </div>
          </div>
        </div>

        <p class="page-description" v-if="statusFilter === 'pending'">
          浏览并确认新的订单，开启您的种植计划
        </p>
        <p class="page-description" v-else>
          管理您已确认的订单，跟踪种植进度
        </p>

        <!-- 订单列表 -->
        <div class="sticky-notes-container">
          <transition-group name="sticky-note" tag="div" class="sticky-notes-grid">
            <div 
              v-for="order in filteredOrders" 
              :key="order.id" 
              class="sticky-note"
              :class="{
                'tearing': order.tearing,
                'yellow': order.color === 'yellow',
                'green': order.color === 'green',
                'blue': order.color === 'blue',
                'pink': order.color === 'pink',
                'confirmed-note': order.status === 'confirmed'
              }"
            >
              <!-- 撕去效果层 -->
              <div class="tear-effect" v-if="order.tearing"></div>
              
              <!-- 便签内容 -->
              <div class="note-content" :class="{ 'fade-out': order.tearing }">
                <!-- 便签顶部装饰 -->
                <div class="note-header">
                  <div class="note-pin"></div>
                  <div class="note-tape"></div>
                </div>
                
                <!-- 订单状态标签 -->
                <div class="status-badge" :class="order.status">
                  {{ order.status === 'pending' ? '待确认' : '已确认' }}
                </div>
                
                <!-- 订单信息 -->
                <div class="order-info">
                  <h3 class="crop-name">{{ order.cropName }}</h3>
                  <div class="crop-type">{{ order.cropType }}</div>
                  
                  <div class="order-details">
                    <div class="detail-item">
                      <span class="label">数量：</span>
                      <span class="value">{{ order.quantity }} {{ order.unit }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">价格：</span>
                      <span class="value price">¥{{ order.price }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">交付时间：</span>
                      <span class="value">{{ formatDate(order.expectedDelivery) }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">交付地址：</span>
                      <span class="value address">{{ order.address }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">违约金：</span>
                      <span class="value penalty">¥{{ order.penaltyAmount }}</span>
                    </div>

                    <!-- 已确认订单显示买家信息和预付款 -->
                    <div v-if="order.status === 'confirmed'" class="confirmed-info">
                      <div class="detail-item">
                        <span class="label">买家姓名：</span>
                        <span class="value">{{ order.buyerName }}</span>
                      </div>
                      <div class="detail-item">
                        <span class="label">联系电话：</span>
                        <span class="value">{{ order.buyerPhone }}</span>
                      </div>
                      <div class="detail-item highlight">
                        <span class="label">预付款：</span>
                        <span class="value advance">¥{{ order.advancePayment }}</span>
                      </div>
                    </div>
                  </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="note-actions">
                  <button 
                    v-if="order.status === 'pending'" 
                    class="btn confirm-btn" 
                    @click="confirmOrder(order.id)"
                    :disabled="order.tearing"
                  >
                    <span class="btn-icon">✓</span>
                    确认订单
                  </button>
                  <button 
                    v-if="order.status === 'confirmed'" 
                    class="btn breach-btn" 
                    @click="showBreachModal(order.id)"
                  >
                    <span class="btn-icon">✕</span>
                    无法完成
                  </button>
                </div>
              </div>
            </div>
          </transition-group>
        </div>

        <!-- 空状态 -->
        <div v-if="filteredOrders.length === 0" class="empty-state">
          <div class="empty-icon" v-if="statusFilter === 'pending'">📋</div>
          <div class="empty-icon" v-else>✅</div>
          <h3 v-if="statusFilter === 'pending'">暂无待确认订单</h3>
          <h3 v-else>暂无已确认订单</h3>
          <p v-if="statusFilter === 'pending'">新的订单将会在这里显示</p>
          <p v-else>您确认的订单将会在这里显示</p>
        </div>
      </div>
    </main>

    <!-- 违约确认模态框 -->
    <div v-if="showBreachConfirm" class="modal-overlay">
      <div class="modal">
        <h3>确认无法完成订单</h3>
        <p>您确定无法完成此订单吗？这将会触发违约，您需要支付 ¥{{ currentPenaltyAmount }} 的违约金。</p>
        <div class="modal-actions">
          <button class="btn cancel-btn" @click="showBreachConfirm = false">取消</button>
          <button class="btn confirm-breach-btn" @click="handleBreach">确认违约</button>
        </div>
      </div>
    </div>
     <!-- 确认订单模态框 -->
    <div v-if="showConfirmOrder" class="modal-overlay">
    <div class="modal">
      <h3>确认订单</h3>
      <p>您确定要确认此订单吗？</p>
      <p>您必须于{{ formatDate(currentExpectedDelivery) }}前交付农产品，否则将会触发违约</p>
      <div class="modal-actions">
        <button class="btn cancel-btn" @click="showConfirmOrder = false">取消</button>
        <button class="btn confirm-btn" @click="handleConfirmOrder">确认</button>
      </div>
    </div>
  </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 农夫信息
const farmerName = ref('张农夫')
const farmerId = ref(1001) // 模拟农夫ID

// 状态筛选
const statusFilter = ref('pending')

// 模态框状态
const showBreachConfirm = ref(false)

// 确认订单模态框状态
const showConfirmOrder = ref(false)

const currentOrderId = ref(null)
const currentPenaltyAmount = ref(0)
const currentExpectedDelivery = ref('')

// 订单数据
const orders = ref([
  {
    id: 1,
    cropType: '水果',
    cropName: '有机苹果',
    quantity: 100,
    unit: '公斤',
    price: 1200,
    expectedDelivery: '2023-12-15',
    address: '北京市朝阳区建国路88号',
    penaltyAmount: 240,
    status: 'pending',
    tearing: false,
    color: 'yellow',
    buyerName: '',
    buyerPhone: '',
    advancePayment: 0,
    confirmedBy: null
  },
  {
    id: 2,
    cropType: '蔬菜',
    cropName: '有机番茄',
    quantity: 50,
    unit: '公斤',
    price: 800,
    expectedDelivery: '2023-12-10',
    address: '上海市浦东新区陆家嘴环路1000号',
    penaltyAmount: 160,
    status: 'pending',
    tearing: false,
    color: 'green',
    buyerName: '',
    buyerPhone: '',
    advancePayment: 0,
    confirmedBy: null
  },
  {
    id: 3,
    cropType: '谷物',
    cropName: '有机大米',
    quantity: 200,
    unit: '公斤',
    price: 1500,
    expectedDelivery: '2023-11-30',
    address: '广州市天河区珠江新城',
    penaltyAmount: 300,
    status: 'pending',
    tearing: false,
    color: 'blue',
    buyerName: '',
    buyerPhone: '',
    advancePayment: 0,
    confirmedBy: null
  },
  {
    id: 4,
    cropType: '水果',
    cropName: '有机葡萄',
    quantity: 80,
    unit: '公斤',
    price: 1000,
    expectedDelivery: '2023-11-25',
    address: '深圳市南山区科技园',
    penaltyAmount: 200,
    status: 'confirmed',
    tearing: false,
    color: 'pink',
    buyerName: '李女士',
    buyerPhone: '138****5678',
    advancePayment: 200,
    confirmedBy: 1001
  },
  {
    id: 5,
    cropType: '蔬菜',
    cropName: '有机黄瓜',
    quantity: 60,
    unit: '公斤',
    price: 600,
    expectedDelivery: '2023-12-05',
    address: '杭州市西湖区文三路',
    penaltyAmount: 120,
    status: 'confirmed',
    tearing: false,
    color: 'yellow',
    buyerName: '王先生',
    buyerPhone: '139****1234',
    advancePayment: 120,
    confirmedBy: 1001
  }
])

// 计算属性：根据筛选条件过滤订单
const filteredOrders = computed(() => {
  if (statusFilter.value === 'pending') {
    return orders.value.filter(order => order.status === 'pending')
  } else {
    // 只显示当前农夫确认的订单
    return orders.value.filter(order => 
      order.status === 'confirmed' && order.confirmedBy === farmerId.value
    )
  }
})

// 方法：格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}

// 方法：确认订单
const confirmOrder = (orderId) => {
  const order = orders.value.find(o => o.id === orderId)
  if (order) {
    currentOrderId.value = orderId
    currentExpectedDelivery.value = order.expectedDelivery
    showConfirmOrder.value = true
  }
}

// 方法：确认订单
const handleConfirmOrder = () => {
  const orderId = currentOrderId.value
  const order = orders.value.find(o => o.id === orderId)
  if (order) {
    // 启动撕去动画
    order.tearing = true
    // 关闭模态框
    showConfirmOrder.value = false
    // 模拟API调用延迟
    setTimeout(async () => {
      try {
        // 在实际应用中，这里应该调用API更新订单状态
        // await api.confirmOrder(orderId, farmerId.value)
        
        // 更新订单状态
        order.status = 'confirmed'
        order.confirmedBy = farmerId.value
        
        // 计算预付款（订单金额的20%）
        order.advancePayment = order.price * 0.2
        
        // 模拟买家信息（实际应从API获取）
        order.buyerName = '模拟买家'
        order.buyerPhone = '138****0000'
        
        // 在实际应用中，这里应该调用API支付预付款
        // await api.processAdvancePayment(orderId, order.advancePayment)
        
        // 停止动画
        order.tearing = false
        
        // 显示成功消息
        ElMessage.success(`订单确认成功！预付款 ¥${order.advancePayment} 已到账。`)
        
      } catch (error) {
        console.error('确认订单失败:', error)
        // 如果API调用失败，恢复订单状态
        order.tearing = false
        ElMessage.error('订单确认失败，请重试')
      }
    }, 800) // 动画持续时间
  }
}


// 方法：显示违约确认模态框
const showBreachModal = (orderId) => {
  const order = orders.value.find(o => o.id === orderId)
  if (order) {
    currentOrderId.value = orderId
    currentPenaltyAmount.value = order.penaltyAmount
    showBreachConfirm.value = true
  }
}

// 方法：处理违约
const handleBreach = () => {
  const order = orders.value.find(o => o.id === currentOrderId.value)
  if (order) {
    order.status = 'breach'
    showBreachConfirm.value = false
    ElMessage.warning(`订单已标记为违约，请及时支付违约金 ¥${order.penaltyAmount}。`)
  }
}

// 模拟组件挂载时的初始化操作
onMounted(() => {
  // 在实际应用中，这里可以调用API获取订单数据
  console.log('组件已挂载，可以获取订单数据')
})
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f5f7fa;
  color: #333;
  line-height: 1.6;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

/* 主要内容区域样式 */
.main-content {
  padding: 30px 0;
  min-height: calc(100vh - 70px);
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 20px;
}

.page-header h2 {
  font-size: 32px;
  color: #2c3e50;
  margin: 0;
}

.status-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-select {
  padding: 10px 15px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  transition: all 0.3s;
  min-width: 150px;
}

.filter-select:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.page-description {
  font-size: 16px;
  color: #7f8c8d;
  margin-bottom: 40px;
  text-align: center;
}

/* 按键 */
/* From Uiverse.io by 00Kubi */ 
.radio-inputs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border-radius: 1rem;
  background: linear-gradient(145deg, #e6e6e6, #ffffff);
  box-sizing: border-box;
  box-shadow:
    5px 5px 15px rgba(0, 0, 0, 0.15),
    -5px -5px 15px rgba(255, 255, 255, 0.8);
  padding: 0.5rem;
  width: 300px;
  font-size: 14px;
  gap: 0.5rem;
}

.radio-inputs .radio {
  flex: 1 1 auto;
  text-align: center;
  position: relative;
}

.radio-inputs .radio input {
  display: none;
}

.radio-inputs .radio .name {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 0.7rem;
  border: none;
  padding: 0.7rem 0;
  color: #2d3748;
  font-weight: 500;
  font-family: inherit;
  background: linear-gradient(145deg, #ffffff, #e6e6e6);
  box-shadow:
    3px 3px 6px rgba(0, 0, 0, 0.1),
    -3px -3px 6px rgba(255, 255, 255, 0.7);
  transition: all 0.2s ease;
  overflow: hidden;
}

.radio-inputs .radio input:checked + .name {
  background: linear-gradient(145deg, #3b82f6, #2563eb);
  color: white;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow:
    inset 2px 2px 5px rgba(0, 0, 0, 0.2),
    inset -2px -2px 5px rgba(255, 255, 255, 0.1),
    3px 3px 8px rgba(59, 130, 246, 0.3);
  transform: translateY(2px);
}

/* Hover effect */
.radio-inputs .radio:hover .name {
  background: linear-gradient(145deg, #f0f0f0, #ffffff);
  transform: translateY(-1px);
  box-shadow:
    4px 4px 8px rgba(0, 0, 0, 0.1),
    -4px -4px 8px rgba(255, 255, 255, 0.8);
}

.radio-inputs .radio:hover input:checked + .name {
  transform: translateY(1px);
}

/* Animation */
.radio-inputs .radio input:checked + .name {
  animation: select 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Particles */
.radio-inputs .radio .name::before,
.radio-inputs .radio .name::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.radio-inputs .radio input:checked + .name::before,
.radio-inputs .radio input:checked + .name::after {
  animation: particles 0.8s ease-out forwards;
}

.radio-inputs .radio .name::before {
  background: #60a5fa;
  box-shadow: 0 0 6px #60a5fa;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}

.radio-inputs .radio .name::after {
  background: #93c5fd;
  box-shadow: 0 0 8px #93c5fd;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}

/* Sparkles */
.radio-inputs .radio .name::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    rgba(59, 130, 246, 0.3) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.3s;
}

.radio-inputs .radio input:checked + .name::after {
  opacity: 1;
  animation: sparkle-bg 1s ease-out forwards;
}

/* Multiple particles */
.radio-inputs .radio input:checked + .name {
  overflow: visible;
}

.radio-inputs .radio input:checked + .name::before {
  box-shadow:
    0 0 6px #60a5fa,
    10px -10px 0 #60a5fa,
    -10px -10px 0 #60a5fa;
  animation: multi-particles-top 0.8s ease-out forwards;
}

.radio-inputs .radio input:checked + .name::after {
  box-shadow:
    0 0 8px #93c5fd,
    10px 10px 0 #93c5fd,
    -10px 10px 0 #93c5fd;
  animation: multi-particles-bottom 0.8s ease-out forwards;
}

@keyframes select {
  0% {
    transform: scale(0.95) translateY(2px);
  }
  50% {
    transform: scale(1.05) translateY(-1px);
  }
  100% {
    transform: scale(1) translateY(2px);
  }
}

@keyframes multi-particles-top {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  40% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px) scale(0);
    box-shadow:
      0 0 6px transparent,
      20px -20px 0 transparent,
      -20px -20px 0 transparent;
  }
}

@keyframes multi-particles-bottom {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  40% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(20px) scale(0);
    box-shadow:
      0 0 8px transparent,
      20px 20px 0 transparent,
      -20px 20px 0 transparent;
  }
}

@keyframes sparkle-bg {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}

/* Ripple effect */
.radio-inputs .radio .name::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    rgba(255, 255, 255, 0.5) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.3s;
}

.radio-inputs .radio input:checked + .name::before {
  animation: ripple 0.8s ease-out;
}

@keyframes ripple {
  0% {
    opacity: 1;
    transform: scale(0.2);
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}

/* Glowing border */
.radio-inputs .radio input:checked + .name {
  position: relative;
}

.radio-inputs .radio input:checked + .name::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(
    45deg,
    rgba(59, 130, 246, 0.5),
    rgba(37, 99, 235, 0.5)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: border-glow 1.5s ease-in-out infinite alternate;
}

@keyframes border-glow {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

/* 便签容器样式 */
.sticky-notes-container {
  display: flex;
  justify-content: center;
}

.sticky-notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
  width: 100%;
  max-width: 1000px;
}

/* 便签基础样式 */
.sticky-note {
  position: relative;
  min-height: 320px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 
    0 10px 20px rgba(0,0,0,0.1),
    0 6px 6px rgba(0,0,0,0.1),
    inset 0 -8px 20px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  transform-style: preserve-3d;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(135deg, #FFF9C4, #FFEB3B);
}

.sticky-note:hover {
  transform: translateY(-5px) rotate(1deg);
  box-shadow: 
    0 15px 25px rgba(0,0,0,0.15),
    0 10px 10px rgba(0,0,0,0.1),
    inset 0 -8px 20px rgba(0,0,0,0.05);
}

/* 已确认订单样式 */
.sticky-note.confirmed-note {
  border-left: 4px solid #4CAF50;
}

/* 便签颜色变体 */
.sticky-note.yellow {
  background: linear-gradient(135deg, #FFF9C4, #FFEB3B);
}

.sticky-note.green {
  background: linear-gradient(135deg, #C8E6C9, #4CAF50);
}

.sticky-note.blue {
  background: linear-gradient(135deg, #B3E5FC, #03A9F4);
}

.sticky-note.pink {
  background: linear-gradient(135deg, #F8BBD0, #E91E63);
}

/* 便签顶部装饰 */
.note-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.note-pin {
  width: 12px;
  height: 12px;
  background: #c62828;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  z-index: 2;
}

.note-tape {
  position: absolute;
  top: 8px;
  width: 80%;
  height: 20px;
  background: rgba(255,255,255,0.4);
  transform: rotate(-2deg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 状态标签 */
.status-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.pending {
  background: #FF9800;
  color: white;
}

.status-badge.confirmed {
  background: #4CAF50;
  color: white;
}

/* 便签内容 */
.note-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: opacity 0.5s ease;
}

.note-content.fade-out {
  opacity: 0;
}

.order-info {
  flex: 1;
  margin-top: 25px;
}

.crop-name {
  font-size: 22px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 5px;
  text-align: center;
}

.crop-type {
  font-size: 14px;
  color: #7f8c8d;
  text-align: center;
  margin-bottom: 20px;
  font-style: italic;
}

.order-details {
  margin-bottom: 20px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(0,0,0,0.1);
}

.detail-item.highlight {
  background: rgba(255,255,255,0.5);
  margin: 10px -10px;
  padding: 8px 10px;
  border-radius: 4px;
  border-bottom: none;
}

.label {
  font-weight: 600;
  color: #555;
  min-width: 80px;
}

.value {
  color: #333;
  text-align: right;
  flex: 1;
}

.value.price {
  color: #e74c3c;
  font-weight: 700;
}

.value.penalty {
  color: #c0392b;
  font-weight: 600;
}

.value.advance {
  color: #27ae60;
  font-weight: 700;
}

.value.address {
  font-size: 12px;
}

/* 已确认订单信息 */
.confirmed-info {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 2px dashed rgba(0,0,0,0.2);
}

/* 操作按钮 */
.note-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
}

.btn {
  flex: 1;
  padding: 10px 15px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 14px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.confirm-btn {
  background: #27ae60;
  color: white;
  box-shadow: 0 2px 5px rgba(39, 174, 96, 0.3);
}

.confirm-btn:hover:not(:disabled) {
  background: #219653;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(39, 174, 96, 0.4);
}

.breach-btn {
  background: #e74c3c;
  color: white;
  box-shadow: 0 2px 5px rgba(231, 76, 60, 0.3);
}

.breach-btn:hover:not(:disabled) {
  background: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(231, 76, 60, 0.4);
}

.btn-icon {
  font-size: 16px;
}

/* 撕去动画效果 */
.sticky-note.tearing {
  animation: tearOff 0.8s ease forwards;
  pointer-events: none;
}

.tear-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.8) 50%, transparent 70%);
  animation: tearShine 0.8s ease;
  z-index: 10;
}

@keyframes tearOff {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-50px) rotate(5deg) scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: translateY(100px) rotate(10deg) scale(0.9);
    opacity: 0;
  }
}

@keyframes tearShine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* 便签入场动画 */
.sticky-note-enter-active {
  animation: slideInUp 0.5s ease;
}

.sticky-note-leave-active {
  animation: tearOff 0.8s ease;
}

@keyframes slideInUp {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: #7f8c8d;
}

.empty-icon {
  font-size: 80px;
  margin-bottom: 20px;
  opacity: 0.5;
}

.empty-state h3 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #95a5a6;
}

.empty-state p {
  font-size: 16px;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  background: white;
  border-radius: 8px;
  padding: 25px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.modal h3 {
  margin-bottom: 15px;
  color: #2c3e50;
}

.modal p {
  margin-bottom: 20px;
  color: #555;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.cancel-btn {
  background: #95a5a6;
  color: white;
  padding: 10px 20px;
}

.cancel-btn:hover {
  background: #7f8c8d;
}

.confirm-breach-btn {
  background: #e74c3c;
  color: white;
  padding: 10px 20px;
}

.confirm-breach-btn:hover {
  background: #c0392b;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sticky-notes-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .sticky-note {
    min-height: 300px;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .page-header h2 {
    font-size: 28px;
  }
  
  .filter-select {
    width: 100%;
  }
  
  .note-actions {
    flex-direction: column;
  }
}
</style>